<template>
  <div>
    <vue-ueditor-wrap
      v-model="msg"
      :config="editorConfig"
      editor-id="editor-with-xiumi"
      :editor-dependencies="editorDependencies"
    />
    <div class="button">
      <div class="bind" @click="handleClick(url)">绑定秀米</div>
      <div class="unbind" @click="handleClick('https://xiumi.us/#/user/partnerbind')">解绑秀米</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { notification } from 'ant-design-vue';
import { ref } from "vue";
import { Md5 } from "ts-md5";
const msg = ref();
const editorConfig = {
  fullscreen: true,
  UEDITOR_HOME_URL: "/UEditor2/", // 访问 UEditor 静态资源的根路径，可参考常见问题1
  UEDITOR_CORS_URL: "/UEditor2/",
  serverUrl: "http://localhost:3000/server", // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
  catchRemoteImageEnable: true, // 抓取远程图片
  // whiteList 已经在 ueditor.config.js 里改过了，此处略
  // toolbars: [["xiumi-connect", "135editor"]]
  // serverHeaders: {
  //   'Authorization': 'secret 0040fe7a94fa3218fe5e0fa384dbb162'
  // }
};
// 指定依赖的资源列表，下面的 JS 会依次加载，注意顺序。实际请求资源时会拼接上 UEDITOR_HOME_URL，当然你也可以填完整的 URL
const editorDependencies = [
  'ueditor.config.js',
  'ueditor.all.js',
  // 添加秀米相关的资源
  'xiumi/xiumi-ue-dialog-v5.js',
  'xiumi/xiumi-ue-v5.css',
  // // 添加135编辑器相关的资源
  '135/135editor.js',
  '135/135editor.css'
];
const partner_user_id = "001";
const timestamp = Date.now();
const nonce = Math.floor(Math.random() * 1000000);
const cs = [partner_user_id, import.meta.env.VITE_SECRET, timestamp, nonce].sort().join('');
const signature = Md5.hashStr(Md5.hashStr(cs));
const url = `https://xiumi.us/auth/partner/bind?signature=${signature}&timestamp=${timestamp}&nonce=${nonce}&partner_user_id=${partner_user_id}&appid=${import.meta.env.VITE_APP_ID}&bind_name=${import.meta.env.VITE_APP_NAME}`;
const handleClick = (url: string) => {
  window.open(url)
}

const notice: any = {
  bind: "账号绑定成功",
  unbind: "账号解绑成功",
  err_html: "HTML存储失败",
  err_image: "图片存储失败",
  secret_reset: 'secret已重置'
}
        
const socket = new WebSocket(import.meta.env.VITE_WEBSOCKET);

socket.addEventListener('open', function (event) {
    console.log('WebSocket连接已建立');
});

// 当收到消息时
socket.onmessage = function(event) {
  const dataMsg = JSON.parse(event.data)
  console.log('前端收到消息：', dataMsg);
  if(notice[dataMsg.type]) {
    notification.info({
      message: '秀米通知',
      duration: 0,
      description: notice[dataMsg.type]
    });
  }
};
</script>
<style scoped>
.bind, .unbind {
  position: fixed;
  right: 20px;
  top: 200px;
  z-index: 10000;
  color: red;
  cursor: pointer;
  padding: 5px 10px;
  background: #ffe9e9;
  border-radius: 5px;
}
.unbind {
  top: 250px;
}
</style>
<style>
.ant-notification {
  z-index: 10000;
}
</style>